<template>
  <div style="height: 100%;width: 100%">
    <ol-table-search v-if="formConfig && searchRow == '1'" :formConfig="formConfig"></ol-table-search>
    <splitpanes :style="formConfig ? getStyle : ''" class="default-theme splitpanesModel" :horizontal="horizontal"
                :push-other-panes="false">
      <pane style="background: transparent" :size="50" v-bind="paneSize">
        <div :class="isLR ? 'left' :'top'">
          <olTable :ref="theme1" v-bind="$attrs" @initOk="initOk" :initDataSource="false" :theme="theme1">
            <template v-for='item in Object.keys($slots).filter(o=>o.indexOf("_t1") != -1)' v-slot:[item]>
              <slot :name="item"></slot>
            </template>
          </olTable>
        </div>
      </pane>
      <pane style="background: transparent" v-bind="paneSize">
        <div :class="isLR ? 'right' :'bottom'">
          <olTable :ref="theme2" v-bind="$attrs" :initDataSource="false" :theme="theme2">
            <template v-for='item in Object.keys($slots).filter(o=>o.indexOf("_t2") != -1)' v-slot:[item]>
              <slot :name="item"></slot>
            </template>
          </olTable>
        </div>
      </pane>
    </splitpanes>

  </div>
</template>
<script scope>
import {Pane, Splitpanes} from "splitpanes";
import {modelMixins} from "@/components/table/model/ModelMixins";

export default {
  name: 'splitpanesModel',
  mixins: [modelMixins],
  components: {Splitpanes, Pane}, props: {
    searchRow: {default: '0'},
    theme1: {default: 't1'},
    theme2: {default: 't2'},
    horizontal: {default: true},
    isLR: {default: true},
  }, computed: {
    getStyle() {
      let px = Math.ceil(this.formConfig.items.length / 4) * 45;
      let style = 'height: calc(100% - ' + px + 'px)'
      return style

    },
  }, methods: {}, created() {
  }
}
</script>
<style scoped>
@import "splitpanesModel.css";
</style>
